<template>
  <div class="recommend details">
    <carousel :swiperOption="swiperOption" :listImg="listImg" ref="carousel"></carousel>
    <!--<carousel :swiperOption="swiperOption1" :listImg="listImg" ref="carousel2"></carousel>-->
    <recommendItem :list="personalizedList[item.type]" :title="item.name" v-for="item in recommendList" :key="item.id" :cols="item.cols" v-if="isList"></recommendItem>
  </div>
</template>

<script type="text/ecmascript-6">
  import carousel from '../carousel/carousel.vue'
  import recommendItem from '../recommendItem/recommendItem.vue'
  const ERROk = 200
  export default{
    data () {
      return {
        listImg: [],
        isList: false,
        personalizedList: [],
        recommendList: [{
          type: '',
          name: '推荐歌单',
          length: 6,
          cols: 3
        },
        {
          type: 'privatecontent',
          name: '独家放送',
          length: 2,
          cols: 2
        },
        {
          type: 'newsong',
          name: '最新音乐',
          length: 6,
          cols: 3
        },
        {
          type: 'mv',
          name: '推荐MV',
          length: 4,
          cols: 2
        },
        {
          type: 'djprogram',
          name: '主播电台',
          length: 6,
          cols: 3
        }],
        swiperOption: {
          slidesPerView: 1,
          loop: true,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          observer: true, // 修改swiper自己或子元素时，自动初始化swiper
          observeParents: true // 修改swiper的父元素时，自动初始化swiper
        },
        swiperOption1: {
          slidesPerView: 1,
          loop: true,
          centeredSlides: true,
          autoplay: {
            delay: 1500,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          observer: true, // 修改swiper自己或子元素时，自动初始化swiper!!!
          observeParents: true // 修改swiper的父元素时，自动初始化swiper!!!
        }
      }
    },
    activated() {
      this.$ajax.get('/banner').then((response) => {
        if (response.data.code === ERROk) {
          this.listImg = response.data.banners
          this.$nextTick(function () {
            this.$refs.carousel.showSwiper = true
            // this.$refs.carousel2.showSwiper = true
          })
        }
      })
      var _this = this
      this.recommendList.forEach(function(item) {
        _this.personalized(item.type, item.length)
      })
    },
    deactivated() {
      console.log(document.body.scrollTop)
    },
    methods: {
      personalized(type, length) {
        this.$ajax.get(`/personalized/${type}`).then((response) => {
          if (response.data.code === ERROk) {
            this.personalizedList[`${type}`] = response.data.result.slice(0, `${length}`)
            if (type === 'djprogram') {
              this.isList = true
            }
          }
        })
      }
    },
    components: {
      carousel,
      recommendItem
    }
  }
</script>

<style>

</style>
